<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('Http发送报文')"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">请求信息</div>
            <div class="layui-card-body">
                <form action="" class="layui-form">
                    <div class="main-container">
                        <div class="layui-form-item">
                            <label class="layui-form-label">url</label>
                            <div class="layui-input-block">
                                <input autocomplete="off" class="layui-input" lay-verify="required" name="url"
                                       th:value="${url}"
                                       placeholder="请输入地址"
                                       type="text">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">媒体类型</label>
                            <div class="layui-input-block">
                                <select dict-code="msg_media_type" lay-verify="required" name="mediaType"
                                        default-value="application/json">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">编码</label>
                            <div class="layui-input-block">
                                <select dict-code="msg_charset_name" lay-verify="required" name="charsetName"
                                        default-value="UTF-8">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Http方法</label>
                            <div class="layui-input-block">
                                <select dict-code="msg_http_method" lay-verify="required" name="httpMethod"
                                        default-value="POST">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">请求报文</label>
                            <div class="layui-input-block">
                                    <textarea class="layui-textarea" style="min-height: 300px" lay-verify="required"
                                              name="msgContent" placeholder="请输入请求报文内容"></textarea>
                            </div>
                        </div>
                        <br/>
                    </div>
                    <div class="bottom">
                        <div class="button-container">
                            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-filter="msg-send" lay-submit=""
                                    type="submit">
                                <i class="layui-icon layui-icon-ok"></i>
                                发送
                            </button>
                            <button class="pear-btn pear-btn-sm" type="reset">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">响应报文</div>
            <div class="layui-card-body">
                <textarea class="layui-textarea" style="min-height: 500px" id="respMsgContent"
                          name="respMsgContent"></textarea>
            </div>
        </div>
    </div>
</div>

</body>

<th:block th:include="include :: footer"/>
<script>
    layui.use(['form', 'jquery', 'common', 'layer', 'button', 'dictionary'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let layer = layui.layer;
        let button = layui.button;

        form.on('submit(msg-send)', function (data) {
            let loader = layer.load();
            let btn = button.load({elem: '.msg-send'});
            $.ajax({
                url: '/client/msg/sendHttp',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loader);
                    btn.stop(function () {
                        if (result.success) {
                            layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                if (!common.isEmpty(result.data)) {
                                    $("#respMsgContent").val(result.data);
                                }
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 3000});
                        }
                    })
                }
            })
            return false;
        });

    })
</script>
</html>